<template>
  <div style="display: inline-block">
    <div v-if="model === 'colorMark'" class="color-mark">
      <span class="radius-icon" :style="{ 'background-color': color }"></span>
      <span>{{ text }}</span>
    </div>
    <div v-else-if="model === 'tagMark'" class="tag-mark">
      <span v-if="type === 'success'" class="success">
        <span>{{ text }}</span>
      </span>
      <span v-else-if="type === 'danger'" class="danger">
        <span>{{ text }}</span>
      </span>
      <span v-else-if="type === 'warning'" class="warning">
        <span>{{ text }}</span>
      </span>
      <span v-else-if="type === 'info'" class="info">
        <span>{{ text }}</span>
      </span>
      <span v-else-if="type === 'primary'" class="primary">
        <span>{{ text }}</span>
      </span>
      <span v-else-if="type === 'running'" class="running">
        <span>{{ text }}</span>
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ColorMark',
  props: {
    model: {
      type: String,
      default: 'colorMark'
    },
    color: {
      type: [String, Function],
      default: 'red'
    },
    text: {
      type: [String, Function],
      default: ''
    },
    type: {
      type: [String, Function],
      default: 'success'
    }
  },
  data() {
    return {}
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.color-mark {
  display: inline-block;
  .radius-icon {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transform: scale(70%);
    vertical-align: middle;
    margin-right: 5px;
  }
}
.tag-mark {
  display: inline-block;
  & > span {
    display: inline-block;
    border-radius: 4px;
    padding: 0 5px;
    line-height: 1.2;
    & > span {
      display: inline-block;
      transform: scale(80%);
      font-size: 12px;
    }
  }
  .success {
    background-color: #06c261;
    color: #fff;
  }
  .warning {
    background-color: #fffae0;
    color: #ffa81d;
  }
  .info {
    background-color: #f4f4f4;
    color: #999999;
  }
  .danger {
    background-color: #ffdddd;
    color: #f56c6c;
  }
  .primary {
    background-color: #e1fff0;
    color: #06c261;
  }
  .running {
    background-color: #409eff;
    color: #fff;
  }
}
</style>
